

* {
  padding: 0;
  margin: 0;
}

@import './color.scss';
@import './mixin.scss';

.dis_if {
	display: inline-flex;
}
.dn,.hide,.dis_none{
  @include none;
}
.dis_b,.dis-block {
  @include block;
}
.dis_ib,.dis-iblock {
	display: inline-block;
}
.dis_f,.dis-flex {
  @include flex;
}
.dis_f_wrap,.dis-flex-wrap{
  @include flex;
  flex-wrap: wrap
}
[class*=flex-]:not(.flex-three){ // 前缀的不要带强制
	display: flex;
}


.onelist-hidden {
  @include block;
  @include oh;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.twolist-hidden {
  @include block;
  @include oh;
	word-break: break-all;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}


.flex-box {
	flex: 1;
}

.flex-dir-row {
	flex-direction: row;
}



.flex-dir-column { //垂直布局
  @include flex-direction;
}

.flex-x-center { // x轴居中
  @include flex-x-center;
}

.flex-y-center { // y轴居中
  @include flex-y-center;
}

.flex-x-between { // x轴起始位开始分割空白如
  @include flex-x-between;
}

.flex-x-around {
	justify-content: space-around; // x轴除前后所有间距都一致，前后空白是其它空白的一半
}

.flex-x-end { //x轴右对齐
	justify-content: flex-end;
}

.flex-y-end { // y轴底对齐
	align-items: flex-end;
}

.flex-x{ // x轴水平居中
  @include flex;
  @include flex-x-center;
}

.flex-x-y{ // x轴水平居中 y轴水平居中
  @include flex;
  @include flex-x-center;
  @include flex-y-center;
}

.flex-x-y-vertical{ // x轴水平居中 y轴水平居中 垂直布局
  @include flex;
  @include flex-x-center;
  @include flex-y-center;
  @include flex-direction;
}

.fl {
  @include fl;
}

.fr {
	float: right;
}

.flex-two {
  @include fl;
	width: 50%;
}

.flex-three {
  @include fl;
	width: 33.3%;
}

.flex-four {
  @include box-sizing-border-box;
	flex: 0 0 25%;
}

.flex-five {
  @include box-sizing-border-box;
	flex: 0 0 50%;
}


.t-l {
	text-align: left;
}

.t-c {
	text-align: center;
}

.t-r {
	text-align: right;
}

.p-a {
	position: absolute;
}

.p-r {
	position: relative;
}

.p-f {
	position: fixed;
}

.clear::after {
	clear: both;
	content: ' ';
	display: table;
}

#main{
  @include flex;
  @include flex-y-center;
  @include flex-direction;
}
#center{
  max-width: $max-width;
}



.cur-p,li{
	cursor: pointer;
}
li{
  list-style: none;
}

.logo{
  width: 10rem /* 160/16 */;
  height: 2.25rem /* 36/16 */;
}
.mask{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5,7,23,.6);
  display: none;
  z-index: 111111;
}
.mode_box{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  z-index: 111111;
  -webkit-animation-name: scaleDraw; /*关键帧名称*/
  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
  -webkit-animation-iteration-count: 1;  /*动画播放的次数*/
  -webkit-animation-duration: 2s; /*动画所花费的时间*/
}
.model{
  width: 55.25rem /* 884/16 */;
  height: 33.0625rem /* 529/16 */;
  @include position-center;
  background: #ffffff;
  box-shadow: 0rem .25rem /* 4/16 */ 2rem /* 32/16 */ 0rem /* 0/16 */ rgba(25,30,64,0.2);
  .icon-close{
    position: absolute;
    font-size: 2rem /* 32/16 */;
    top: 2rem /* 32/16 */;
    right: 2rem /* 32/16 */;
  }
}
.bg_transparent{
   .header{background: white;}
  .icon-menu:before{color:black;}
  .icon-close:before{color:black;}
}
#header{width: 100%;}
#footer{width: 100%;}
@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0%{
      transform: scale(0.8);  /*开始为原始大小*/
  }
  25%{
      transform: scale(1); /*放大1.1倍*/
  }
}